<!DOCTYPE html>
<html>
<head>
	<title>todolist</title>
	<meta charset="utf-8">
	<script src="jquery.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;}
		li{list-style:none;}
		a{text-decoration:none;}
		i,em{
			font-style:normal;
		}
		.wrap{

		}
		.clear:after{
			display: block;
			content:"";
			clear:both;
		}
		.content{
			width: 600px;
			margin:0 auto;
		}
		.top{
			height: 50px;
			background-color: #000;
			line-height: 50px;
		}
		.top strong{
			font-size:22px;
			font-weight:normal;
			color:#e3e3e3;
		}
		.top .left{
			height: 50px;
			float: left;
		}
		.sign-in .input{
			text-align:center;
			margin-top: 100px;
			font-size:30px;
		}
		.sign-in .input input{
			height: 50px;
			width: 300px;
			font-size:30px;
			border-radius:5px;
		}
		.rember{
			margin-top:30px;
			font-size:26px;
			text-align: center;
		}
		.rember input{
			height: 20px;
			width: 20px;
			margin-right:5px;
		}
		.sign-register{
			text-align:center;
			margin-top:30px;
		}
		.sign-register button{
			padding:30px 60px;
			background-color: #f99;
			cursor:pointer;
			border-radius: 10px;
			border:none;
			font-size:25px;
			margin:10px;
		}
		.sign-register button:hover{
			background-color: #666;
			color:#fff;
		}
	</style>
</head>
<body> 
	<div class="wrap">
		<div class="top">
			<div class="content clear">
				<div class="left">
					<strong>ToDoList</strong>
				</div>
			</div>
		</div>
		<div class="content sign-in">
			<div class="input">
				账号： <input type="text" placeholder="建议手机号方便记忆">
			</div>
			<div class="input">
				密码： <input type="password" placeholder="设置一个容易记的">
			</div>
			<div class="rember">
				<input type="checkbox">记住账号和密码
			</div>
			<div class="sign-register">
				<button class="sign">登录</button>
				<button class="register">注册</button>
			</div>
		</div>
	</div>
	<script>
		$(".input input").eq(0).val(localStorage.getItem("telephone"))
		$(".input input").eq(1).val(localStorage.getItem("password"))
		if(localStorage.getItem("telephone") !== null){
			$(".rember input").prop("checked","checked")
		}
		$(".register").click(function(){
			window.location.href = "register.html"
		})
		$(".sign").click(function(){
			var arr = [];
			$(".input input").each((index,item)=>{
				arr[index] = item.value;
			})
			$.ajax({
				url:`http://192.168.0.115:82/sign-in`,
				data:{
					telephone:arr[0],
					password:arr[1],
				},
				success(data){
					if(data === "登陆成功"){
						if($(".rember input").prop("checked")){
							localStorage.setItem("telephone",arr[0]);
							localStorage.setItem("password",arr[1]);
						}
						window.location.href = "index.html";
					}
					else{
						alert("账号或密码不对");
					}
				}
			})
		})
		if($(".rember input").prop("checked")){
			$(".sign").click();
		}
	</script>
</body>
</html>